<template>
    <div>
        <div class="tile is-ancestor">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <!--<div class="tile is-child box">-->
                        <!--<h1 class="title">Tables</h1>-->
                        <tabs size="small" :only-fade="false">
                            <tab-pane v-for="item in items" :key="item" :label="item">
                                <table-basic></table-basic>
                            </tab-pane>
                        </tabs>
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getAllTableName } from '@/api/data'
import { Tabs, TabPane } from 'vue-bulma-tabs'
import TableBasic from './TableBasic'
export default {
    components: {
        Tabs,
        TabPane,
        TableBasic
    },
    data() {
        return {
            items: ['Table1']
        }
    },
    mounted() {
        this.items.splice(0, 1)
        setInterval(() => {
            this.randomTabs()
        }, 3000)
    },
    created(){
        this.getNames();
    },
    methods: {
        randomTabs() {
            this.items.unshift(this.items.pop())
        },
        getNames(){
            getAllTableName("frosting_db").then(response => {
                let { status, message, code, data } = response;
                if (code !== 200) {
                    this.$message.error(message);
                }else{
                    console.log("Data = " + data);
                    this.items = data;
                    // this.items.splice(data.length);
                    // this.items.splice(0,this.items.length,data);
                    // Vue.set(this.items,0,data);
                    // this.items = this.items.concat(data);
                    // this.items.length = data.length;
                    // this.items.push(0,this.items.length,data);
                }
            })
        }
    }
}
</script>

<style lang="scss">
.tabs {
    margin: 10px;
    .tab-content {
        min-height: 50px;
    }
}
</style>